<template>
  <b-row class="business-block">
    <b-col
      lg="4"
      md="6"
      sm="12"
      v-for="(item, ind) of productList"
      :key="ind"
      class="wow fadeInUp"
      :data-wow-delay="0.2 * ind + 's'"
    >
      <div class="card">
        <div
          class="card-img"
          :style="{
            background: `url(${item.icon}) no-repeat`,
            backgroundSize: 'contain',
          }"
        >
          <p class="card-title">{{ item.title }}</p>
        </div>
        <img
          class="icon-arrow"
          width="24px"
          height="13px"
          src="~/static/img/home/icon-arrow-blue.png"
        />
        <p class="card-desc text-center">{{ item.desc }}</p>
        <div class="card-btn" @click="$router.push('/business/' + item.id)">
          了解更多
        </div>
      </div>
    </b-col>
  </b-row>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        {
          id: 1,
          icon: require("~/static/img/home/business-bg-1.png"),
          title: "数字科技业务",
          desc: "全场景用户运营及营销服务",
        },
        {
          id: 2,
          icon: require("~/static/img/home/business-bg-2.png"),
          title: "智慧物联业务",
          desc: "“云-管-端”物联网综合服务",
        },
        {
          id: 3,
          icon: require("~/static/img/home/business-bg-3.png"),
          title: "智慧文旅业务",
          desc: "体育+旅游内容创新服务",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.business-block {
  height: 890px;
  background: url("@/static/img/home/bg-business@2x.png") no-repeat;
  background-size: cover;
  padding: 0 257px;
  display: flex;
  align-items: center;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 438px;
  height: 652px;
  background: rgba(255, 255, 255);
  border-radius: 25px;
  padding: 25px !important;
  &:hover {
    border: 2px solid #0083ce;
  }
  .card-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 323px;
    font-size: 40px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    line-height: 67px;
  }

  .card-title {
    text-align: center;
  }
}
.card:hover {
  box-shadow: 0px 2px 20px 0px #d5d5d5;
  background: rgba(255, 255, 255, 0.5);
}

.icon-arrow {
  margin: 35px 0 29px;
}

.card-desc {
  font-size: 30px;
  padding: 0 74px;
  font-family: Microsoft YaHei;
  color: #737373;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-btn {
  position: absolute;
  bottom: 48px;
  text-align: center;
  width: 156px;
  line-height: 37px;
  border: 2px solid #737373;
  color: #737373;
  border-radius: 19px;
  &:hover {
    border: 2px solid #0083ce;
    color: #0083ce;
    cursor: pointer;
  }
}

p {
  margin-bottom: 0 !important;
}
</style>
